<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>删除</td>
            </tr>
        </tbody>

    </table>
    <script>
        // 对象数组 
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            },
            {
                name: 'Top2',
                age: 30,
                gender: '男'
            }
        ]


        // 动态生成dom结构
        var htmlStr = "";
        arr.forEach(function (item, key) {
            if (key % 2 == 0) {
                htmlStr += `<tr style="background:red">
                            <td>${item.name}</td>
                            <td>${item.age}</td>
                            <td>${item.gender}</td>
                            <td>删除</td>
                        </tr>`;
            } else {
                htmlStr += `<tr>
                            <td>${item.name}</td>
                            <td>${item.age}</td>
                            <td>${item.gender}</td>
                            <td>删除</td>
                        </tr>`;
            }

        })
        // console.log(htmlStr);
        document.querySelector("tbody").innerHTML = htmlStr;



    </script>
</body>

</html>